<template>
    <div class="c-white m-t-60">
        <h1 class="m-40">登录</h1>
        <div class="m-t-48 m-l-40 m-r-60">
            <el-form :model="form" ref="form" label-width="50px" class="form-box">
                <el-form-item label="账号" size="large" prop="name">
                    <el-input v-model="form.username" size="large" maxlength="20" clearable
                        placeholder="请输入账号/手机号/邮箱" />
                </el-form-item>
                <el-form-item label="密码" size="large" prop="pass">
                    <el-input v-model="form.password" size="large" maxlength="20" type="password" show-password
                        clearable placeholder="请输入密码" />
                </el-form-item>
                <el-form-item>
                    <slot name="cut"></slot>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" size="large" style="width: 100%"
                        @click="onSubmit(this.form)">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { userLogin } from '../api/user/User.js'

export default {
    name: 'SignIn',
    data() {
        return {
            form: {
                username: '',
                password: ''
            },
        }
    },
    created() {
    },
    methods: {
        onSubmit(form) {
            console.log(form);
            userLogin(form).then((res) => {
                console.log(res);
                if (res.data.code == "500" || res.data.code == "400") {
                    ElMessage({
                        message: res.data.msg,
                        type: "error",
                        duration: 3000
                    })
                } else if (res.data.code == "200") {
                    ElMessage({
                        message: "登录成功",
                        type: "success",
                        duration: 1000
                    })
                    localStorage.setItem("userinfo", JSON.stringify(res.data.data))
                    this.$router.push({
                        path: '/home'
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.form-box :deep(.el-form-item__label) {
    color: white;
}
</style>
